<template>
	<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="loadMore" style="height:100%;">
		<view class="">
			<view class="top">
				<!-- #ifdef APP-PLUS -->
				<view class="topPlace"></view>
				<!-- #endif -->
				<view class="search">
					<view class="f40r color-fff">
						<text>社区</text>
					</view>
				</view>
			</view>
			<view class="top_bg ">
				<view class="jui_flex center">
					<view class="jui_flex_col_center c_left">
						<view class="  jui_mar_t8">
							{{i18n.zhitui+i18n.renshu}}
						</view>
						<view class="mt10r">
							<text class="f48r">{{yeji.user_push_num?yeji.user_push_num:0}}</text>
							<text class="">人</text>
						</view>
					</view>
					<view class="jui_flex_col_center c_left">
						<view class="  jui_mar_t8">
							{{i18n.team+i18n.renshu}}
						</view>
						<view class="mt10r">
							<text class="f48r">{{yeji.user_team_num?yeji.user_team_num:0}}</text>
							<text class="">人</text>
						</view>
					</view>
				</view>
			</view>
			<view class="f32r   x-ac p30r">
				<view :class="{'bg-zs color-fff':get_type=='team'}" @tap="tabType('team')"
					class='bor-rad20r bg-eee p10r pl40r pr40r'>团队</view>
				<view :class="{'bg-zs color-fff':get_type=='push'}" @tap="tabType('push')"
					class='bor-rad20r bg-eee p10r pl40r pr40r'>直推</view>
			</view>
			<view class="jui_mar_2432 c_center y-start">
				<view
					class="jui_flex jui_flex_justify_between jui_flex_items_center jui_bor_bottom jui_pad_b20 jui_pad_t20">
					<view class="jui_flex">
						<view class="c_title">
							{{i18n.Account}}
						</view>
						<view class="c_title">
							{{i18n.shifou+i18n.valid}}
						</view>
						<view class="c_title">
							{{i18n.zhitui+i18n.renshu}}
						</view>
						<view class="c_title">
							{{i18n.community+i18n.renshu}}
						</view>
						<view class="c_title">
							{{i18n.register+i18n.time}}
						</view>
					</view>

				</view>
				<view
					class="jui_flex jui_flex_justify_between jui_flex_items_center jui_bor_bottom jui_pad_b20 jui_pad_t20"
					v-for="(item,index) in list" :key="index">
					<view class="jui_flex">
						<view class="c_title">
							{{item.mobile}}
						</view>
						<view class="c_title" :class="{'active-c':item.is_valid==1}">
							{{item.is_valid==1?i18n.valid:i18n.wuxiao}}
						</view>
						<view class="c_title">
							{{item.p_num}}
						</view>
						<view class="c_title">
							{{item.p_team_num}}
						</view>
						<view class="c_title">
							{{item.create_time}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import vNavigation from '@/components/navigation/navigation.vue'
	export default {
		components: {
			vNavigation
		},
		data() {
			return {
				list: [],
				detail: '',
				page: 1,
				size: 15,
				hasMore: false,
				yeji: '',
				get_type: 'team' //team  push
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.i18n.community
			})
			this.getFromToken()
		},
		methods: {
			loadMore() {
				if (this.hasMore) {
					this.page++;
					this.value();
				}
			},
			getFromToken() {
				this.$api.getFromToken({
					data: 1
				}).then(res => {
					if (res.code == 1) {
						this.FromToken = res.FromToken;
						this.team()
					}
				});
			},
			tabType(e) {
				this.get_type = e
				this.team()
			},
			team() {
				let data = {
					get_type: this.get_type,
					FromToken: this.fromToken,
					uid: uni.getStorageSync('loginInfo').id,
				}
				this.$api.getPushOrTeamUser(data).then(res => {
					this.list = res.data.lower_user;
					this.yeji = res.data;
					// this.list = [...this.list, ...res.data.lower_user]
					// if (res.data.lower_user.length == 0) {
					// 	this.hasMore = false
					// } else {
					// 	this.hasMore = true
					// }
				});
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.active-c {
		color: #DB7A18;
	}

	.c_center {
		width: auto;
		overflow-x: auto;
	}

	.c_title {
		width: 250rpx;
		padding-right: 10rpx;
		white-space: nowrap;
		overflow-x: auto;
	}

	.top {
		width: 100%;
		padding: 14upx 36upx;
		background: $zhuse;
	}

	.search {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.c {
			height: 60upx;
			display: flex;
			align-items: center;

		}

	}

	.center {
		position: absolute;
		width: 95%;
		margin-left: 2.5%;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 50rpx;

		.c_left {
			width: 300rpx;
			padding: 20rpx 0;

			// border: 1rpx solid #ffffff;
			margin: 0 2.5%;
			color: #FFFFFF;
			border-radius: 20rpx;
		}
	}

	.top_bg {
		height: 230rpx;
		position: relative;
		// background: url(../../../static/imgs/home/sq_bg.png) 100% 100% / 100% 100% no-repeat;
		background-color: $zhuse;
		border-radius: 0 0 30rpx 30rpx;
	}


	.num {
		font-size: 56rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 20rpx;
	}
</style>
